<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Accordions 手风琴 - Easy Frame</title>
    <meta name="description" content="Updates and statistics">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!--str:::全局css -->
    <link href="/assets/plugins/global/plugins.bundle.css" rel="stylesheet" type="text/css"/>
    <link href="/assets/css/demo1/style.bundle.css" rel="stylesheet" type="text/css"/>
    <!--end::全局css -->

    <link rel="shortcut icon" href="/assets/media/logos/favicon.ico"/>
</head>
<body class="e-page--loading">
<div class="e-content">
    <div class="row">
        <div class="col">
            <div class="alert alert-light alert-elevate fade show" role="alert">
                <div class="alert-icon"><i class="flaticon-warning e-font-brand"></i></div>
                <div class="alert-text">
                    基于<code>Bootstrap Accordion</code>，可前往
                    <a class="e-link e-font-bold" href="https://getbootstrap.com/docs/4.3/components/collapse/#accordion-example" target="_blank">查看详细API</a>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            基础
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Accordion-->
                    <div class="accordion" id="accordionExample1">
                        <div class="card">
                            <div class="card-header" id="headingOne">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="false" aria-controls="collapseOne1">
                                    字体
                                </div>
                            </div>
                            <div id="collapseOne1" class="collapse" aria-labelledby="headingOne"
                                 data-parent="#accordionExample1">
                                <div class="card-body">
                                    <p>字体是体系化界面设计中最基本的构成之一。</p>
                                    <p>我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。
                                        Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，
                                        再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：</p>
                                    <ul>
                                        <li>字体家族</li>
                                        <li>主字体</li>
                                        <li>字阶与行高</li>
                                        <li>字重</li>
                                        <li>字体颜色</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo1"
                                     aria-expanded="false" aria-controls="collapseTwo1">
                                    字体家族
                                </div>
                            </div>
                            <div id="collapseTwo1" class="collapse" aria-labelledby="headingTwo1"
                                 data-parent="#accordionExample1">
                                <div class="card-body">
                                    <p>优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。</p>
                                    <p><code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';</code></p>
                                    <p>参考自 https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 和 http://markdotto.com/2018/02/07/github-system-fonts/</p>
                                    <p>另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。</p>
                                    <p>参考 https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage#comment78509178_32660790</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree1">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree1"
                                     aria-expanded="false" aria-controls="collapseThree1">
                                    建议
                                </div>
                            </div>
                            <div id="collapseThree1" class="collapse" aria-labelledby="headingThree1"
                                 data-parent="#accordionExample1">
                                <div class="card-body">
                                    <p>字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：</p>
                                    <p>建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，
                                        对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，
                                        提高字体应用的性价比，减少不必要的样式浪费。</p>
                                    <p>少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。</p>
                                    <p>尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Accordion-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            浅色
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在<code>div.accordion</code>上添加<code>.accordion-light.accordion-toggle-arrow</code>设置使用浅色并且使用箭头作为打开/收起标志</p>
                    <!--begin::Accordion-->
                    <div class="accordion accordion-light accordion-toggle-arrow" id="accordionExample2">
                        <div class="card">
                            <div class="card-header" id="headingOne2">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne2"
                                     aria-expanded="false" aria-controls="collapseOne2">
                                    字体
                                </div>
                            </div>
                            <div id="collapseOne2" class="collapse" aria-labelledby="headingOne2"
                                 data-parent="#accordionExample2">
                                <div class="card-body">
                                    <p>字体是体系化界面设计中最基本的构成之一。</p>
                                    <p>我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。
                                        Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，
                                        再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：</p>
                                    <ul>
                                        <li>字体家族</li>
                                        <li>主字体</li>
                                        <li>字阶与行高</li>
                                        <li>字重</li>
                                        <li>字体颜色</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo2">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo2"
                                     aria-expanded="false" aria-controls="collapseTwo2">
                                    字体家族
                                </div>
                            </div>
                            <div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo2"
                                 data-parent="#accordionExample2">
                                <p>优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。</p>
                                <p><code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';</code></p>
                                <p>参考自 https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 和 http://markdotto.com/2018/02/07/github-system-fonts/</p>
                                <p>另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。</p>
                                <p>参考 https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage#comment78509178_32660790</p>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree2">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree2"
                                     aria-expanded="false" aria-controls="collapseThree2">
                                    建议
                                </div>
                            </div>
                            <div id="collapseThree2" class="collapse" aria-labelledby="headingThree2"
                                 data-parent="#accordionExample2">
                                <div class="card-body">
                                    <p>字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：</p>
                                    <p>建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，
                                        对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，
                                        提高字体应用的性价比，减少不必要的样式浪费。</p>
                                    <p>少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。</p>
                                    <p>尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Accordion-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            浅色
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在<code>div.accordion</code>上添加<code>.accordion-light.accordion-toggle-plus</code>设置使用浅色并且使用+-作为打开/收起标志</p>
                    <!--begin::Accordion-->
                    <div class="accordion accordion-light accordion-toggle-plus" id="accordionExample3">
                        <div class="card">
                            <div class="card-header" id="headingOne3">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne3"
                                     aria-expanded="false" aria-controls="collapseOne3">
                                    字体
                                </div>
                            </div>
                            <div id="collapseOne3" class="collapse" aria-labelledby="headingOne3"
                                 data-parent="#accordionExample3">
                                <div class="card-body">
                                    <p>字体是体系化界面设计中最基本的构成之一。</p>
                                    <p>我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。
                                        Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，
                                        再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：</p>
                                    <ul>
                                        <li>字体家族</li>
                                        <li>主字体</li>
                                        <li>字阶与行高</li>
                                        <li>字重</li>
                                        <li>字体颜色</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo3">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo3"
                                     aria-expanded="false" aria-controls="collapseTwo3">
                                    字体家族
                                </div>
                            </div>
                            <div id="collapseTwo3" class="collapse" aria-labelledby="headingTwo3"
                                 data-parent="#accordionExample3">
                                <div class="card-body">
                                    <p>优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。</p>
                                    <p><code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';</code></p>
                                    <p>参考自 https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 和 http://markdotto.com/2018/02/07/github-system-fonts/</p>
                                    <p>另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。</p>
                                    <p>参考 https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage#comment78509178_32660790</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree3">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree3"
                                     aria-expanded="false" aria-controls="collapseThree3">
                                    建议
                                </div>
                            </div>
                            <div id="collapseThree3" class="collapse" aria-labelledby="headingThree3"
                                 data-parent="#accordionExample3">
                                <div class="card-body">
                                    <p>字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：</p>
                                    <p>建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，
                                        对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，
                                        提高字体应用的性价比，减少不必要的样式浪费。</p>
                                    <p>少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。</p>
                                    <p>尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Accordion-->
                </div>
            </div>

            <!--end::Card-->
        </div>
        <div class="col-lg-6">

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            文字 + 图标
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Accordion-->
                    <div class="accordion  accordion-toggle-arrow" id="accordionExample4">
                        <div class="card">
                            <div class="card-header" id="headingOne4">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne4"
                                     aria-expanded="false" aria-controls="collapseOne4">
                                    <i class="fa fa-file"></i> 字体
                                </div>
                            </div>
                            <div id="collapseOne4" class="collapse" aria-labelledby="headingOne"
                                 data-parent="#accordionExample4">
                                <div class="card-body">
                                    <p>字体是体系化界面设计中最基本的构成之一。</p>
                                    <p>我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。
                                        Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，
                                        再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：</p>
                                    <ul>
                                        <li>字体家族</li>
                                        <li>主字体</li>
                                        <li>字阶与行高</li>
                                        <li>字重</li>
                                        <li>字体颜色</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo4">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo4"
                                     aria-expanded="false" aria-controls="collapseTwo4">
                                    <i class="fa fa-bars"></i> 字体家族
                                </div>
                            </div>
                            <div id="collapseTwo4" class="collapse" aria-labelledby="headingTwo1"
                                 data-parent="#accordionExample4">
                                <div class="card-body">
                                    <p>优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。</p>
                                    <p><code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';</code></p>
                                    <p>参考自 https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 和 http://markdotto.com/2018/02/07/github-system-fonts/</p>
                                    <p>另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。</p>
                                    <p>参考 https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage#comment78509178_32660790</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree4">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree4"
                                     aria-expanded="false" aria-controls="collapseThree4">
                                    <i class="fa fa-helicopter"></i> 建议
                                </div>
                            </div>
                            <div id="collapseThree4" class="collapse" aria-labelledby="headingThree1"
                                 data-parent="#accordionExample4">
                                <div class="card-body">
                                    <p>字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：</p>
                                    <p>建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，
                                        对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，
                                        提高字体应用的性价比，减少不必要的样式浪费。</p>
                                    <p>少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。</p>
                                    <p>尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Accordion-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            浅色 + 图标
                        </h3>
                    </div>
                </div>
                <div class="card-body">

                    <!--begin::Accordion-->
                    <div class="accordion accordion-light accordion-toggle-arrow" id="accordionExample5">
                        <div class="card">
                            <div class="card-header" id="headingOne5">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne5"
                                     aria-expanded="false" aria-controls="collapseOne5">
                                    <i class="la la-feed"></i> 字体
                                </div>
                            </div>
                            <div id="collapseOne5" class="collapse" aria-labelledby="headingOne5"
                                 data-parent="#accordionExample5">
                                <div class="card-body">
                                    <p>字体是体系化界面设计中最基本的构成之一。</p>
                                    <p>我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。
                                        Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，
                                        再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：</p>
                                    <ul>
                                        <li>字体家族</li>
                                        <li>主字体</li>
                                        <li>字阶与行高</li>
                                        <li>字重</li>
                                        <li>字体颜色</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo5">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo5"
                                     aria-expanded="false" aria-controls="collapseTwo5">
                                    <i class="la la-adjust"></i> 字体家族
                                </div>
                            </div>
                            <div id="collapseTwo5" class="collapse" aria-labelledby="headingTwo5"
                                 data-parent="#accordionExample5">
                                <div class="card-body">
                                    <p>优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。</p>
                                    <p><code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';</code></p>
                                    <p>参考自 https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 和 http://markdotto.com/2018/02/07/github-system-fonts/</p>
                                    <p>另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。</p>
                                    <p>参考 https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage#comment78509178_32660790</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree5">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree5"
                                     aria-expanded="false" aria-controls="collapseThree5">
                                    <i class="la la-tint"></i> 建议
                                </div>
                            </div>
                            <div id="collapseThree5" class="collapse" aria-labelledby="headingThree5"
                                 data-parent="#accordionExample5">
                                <div class="card-body">
                                    <p>字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：</p>
                                    <p>建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，
                                        对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，
                                        提高字体应用的性价比，减少不必要的样式浪费。</p>
                                    <p>少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。</p>
                                    <p>尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!--end::Accordion-->
                </div>
            </div>

            <!--end::Card-->

            <!--begin::Card-->
            <div class="card">
                <div class="card-head">
                    <div class="card-head-label">
                        <h3 class="card-head-title">
                            深色 + 图标
                        </h3>
                    </div>
                </div>
                <div class="card-body">
                    <p>你可以在<code>div.accordion</code>上添加<code>.accordion-solid</code>设置使用深色效果</p>
                    <!--begin::Accordion-->
                    <div class="accordion accordion-solid accordion-toggle-plus" id="accordionExample6">
                        <div class="card">
                            <div class="card-header" id="headingOne6">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseOne6"
                                     aria-expanded="false" aria-controls="collapseOne6">
                                    <i class="flaticon-file"></i> 字体
                                </div>
                            </div>
                            <div id="collapseOne6" class="collapse" aria-labelledby="headingOne6"
                                 data-parent="#accordionExample6">
                                <div class="card-body">
                                    <p>字体是体系化界面设计中最基本的构成之一。</p>
                                    <p>我们的用户通过文本来理解内容和完成工作，科学的字体系统将大大提升用户的阅读体验及工作效率。
                                        Ant Design 字体方案，是基于『动态秩序』的设计原则，结合了自然对数以及音律的规则得出的，
                                        再经过了大量的蚂蚁中后台产品验证之后，推荐给大家。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发：</p>
                                    <ul>
                                        <li>字体家族</li>
                                        <li>主字体</li>
                                        <li>字阶与行高</li>
                                        <li>字重</li>
                                        <li>字体颜色</li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingTwo6">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseTwo6"
                                     aria-expanded="false" aria-controls="collapseTwo6">
                                    <i class="flaticon2-favourite"></i> 字体家族
                                </div>
                            </div>
                            <div id="collapseTwo6" class="collapse" aria-labelledby="headingTwo6"
                                 data-parent="#accordionExample6">
                                <div class="card-body">
                                    <p>优秀的字体系统首先是要选择合适的字体家族。Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。</p>
                                    <p><code>font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB','Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji','Segoe UI Emoji', 'Segoe UI Symbol';</code></p>
                                    <p>参考自 https://www.smashingmagazine.com/2015/11/using-system-ui-fonts-practical-guide/ 和 http://markdotto.com/2018/02/07/github-system-fonts/</p>
                                    <p>另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体 font-variant-numeric 设置为 tabular-nums，使其为等宽字体。</p>
                                    <p>参考 https://stackoverflow.com/questions/32660748/how-to-use-apples-new-san-francisco-font-on-a-webpage#comment78509178_32660790</p>
                                </div>
                            </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="headingThree6">
                                <div class="card-title collapsed" data-toggle="collapse" data-target="#collapseThree6"
                                     aria-expanded="false" aria-controls="collapseThree6">
                                    <i class="flaticon2-talk"></i> 建议
                                </div>
                            </div>
                            <div id="collapseThree6" class="collapse" aria-labelledby="headingThree6"
                                 data-parent="#accordionExample6">
                                <div class="card-body">
                                    <p>字体系统的构建，是『动态秩序之美』的第一步。在实际的设计中，我们还有三点建议：</p>
                                    <p>建立体系化的设计思路：在同一个系统的 UI 设计中先建立体系化的设计思路，
                                        对主、次、辅助、标题、展示等类别的字体做统一的规划，再落地到具体场景中进行微调。建立体系化的设计思路有助于强化横向字体落地的一致性，
                                        提高字体应用的性价比，减少不必要的样式浪费。</p>
                                    <p>少即是多：在视觉展现上能够用尽量少的样式去实现设计目的。避免毫无意义的使用大量字阶、颜色、字重强调视觉重点或对比关系。</p>
                                    <p>尝试让字体像音符一样跳跃：在需要拉开差距的时候可以尝试在字阶表中跳跃的选择字体大小，会令字阶之间产生一种微妙的韵律感。</p>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!--end::Accordion-->
                </div>
            </div>

            <!--end::Card-->
        </div>
    </div>
</div>
<!--str:: 全局js -->
<script src="/assets/plugins/global/plugins.bundle.js"></script>
<script src="/assets/js/demo1/scripts.bundle.js"></script>
<!--end:: 全局js -->
</body>
</html>